<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>数据代理</title>
</head>
<body>
    <!-- 
        关于Vue中的数据代理:
            1.什么是数据代理
                （1）配置对象data中的数据，会被收集到vm._data中，然后通过Object.defineProperty让vm上拥有_data中的同名属性
                （2）当访问vm的msg时，返回的时data中同名属性的值
                （3）当修改vm的msg时，修改的时data中同名属性的值
            2.为什么要数据代理
                为了更加方便的读取和修改data中的数据，不做数据代理，就要：vm._data.xxx访问数据
            3.扩展思考？-为什么非要先将数据收集在_data中，然后在代理出去呢
                更高的数据键是效率（直接收集到vm会导致监视效率太低）
     -->

    <!-- 准备一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <br>
        <h2>{{age}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                name:'iwat',
                age:25
            }
        });

        // console.log(vm.name);
        // console.log(vm);
    </script>
</body>
</html>